<template>
	<view class="invoice-container">
		<!-- 自定义导航栏 - 小程序适配版本 -->
		<view class="custom-navbar" :style="navbarStyle">
			<view class="navbar-content" :style="navbarContentStyle">
				<view class="back-btn" @tap.stop="goBack">
					<u-icon name="arrow-left" size="20" color="#fff"></u-icon>
				</view>
				<view class="navbar-title">
					<text class="title-text">发票信息</text>
				</view>
				<view class="right-btn" @tap.stop="showInvoiceRule">
					<text class="right-text">发票须知</text>
				</view>
			</view>
		</view>
		
		<!-- 表单内容 -->
		<view class="wrapper">
			<view class="form-container">
				<!-- 发票类型 -->
				<view class="form-item">
					<text class="label">发票类型</text>
					<view class="invoice-type-btn">
						<text class="type-text">纸质发票</text>
					</view>
				</view>
				
				<!-- 提示信息 -->
				<view class="tip-box">
					<text class="tip-text">优享优品暂不支持开电子发票，增值税发票。</text>
				</view>
				
				<!-- 发票抬头 -->
				<view class="section-title">发票抬头</view>
				
				<view class="form-item radio-group">
					<view class="radio-item" @click="selectInvoiceType('personal')">
						<view class="radio" :class="{ checked: formData.invoiceType === 'personal' }">
							<view class="radio-inner" v-if="formData.invoiceType === 'personal'"></view>
						</view>
						<text class="radio-label">个人</text>
					</view>
					<view class="radio-item" @click="selectInvoiceType('company')">
						<view class="radio" :class="{ checked: formData.invoiceType === 'company' }">
							<view class="radio-inner" v-if="formData.invoiceType === 'company'"></view>
						</view>
						<text class="radio-label">团体</text>
					</view>
				</view>
				
				<!-- 个人名称 -->
				<view class="form-item" v-if="formData.invoiceType === 'personal'">
					<text class="label required">个人名称</text>
					<input 
						class="input" 
						v-model="formData.personalName" 
						placeholder="请输入个人名称"
						maxlength="50"
					/>
				</view>
				
				<!-- 单位名称 -->
				<view class="form-item" v-if="formData.invoiceType === 'company'">
					<text class="label required">单位名称</text>
					<input 
						class="input" 
						v-model="formData.companyName" 
						placeholder="请输入单位名称"
						maxlength="50"
					/>
				</view>
				
				<!-- 纳税人识别号 -->
				<view class="form-item" v-if="formData.invoiceType === 'company'">
					<text class="label required">纳税人识别号</text>
					<input 
						class="input" 
						v-model="formData.taxNumber" 
						placeholder="请输入纳税人识别号"
						maxlength="20"
					/>
				</view>
				
				<!-- 提示信息 -->
				<view class="tip-box" v-if="formData.invoiceType === 'company'">
					<text class="tip-text">注意:请准确填写纳税人识别号，填写错误商家概不负责。</text>
				</view>
				
				<!-- 发票内容 -->
				<view class="section-title">发票内容</view>
				
				<view class="form-item checkbox-item" @click="toggleInvoiceContent">
					<view class="checkbox" :class="{ checked: formData.invoiceContent }">
						<u-icon v-if="formData.invoiceContent" name="checkbox-mark" color="#fff" size="14"></u-icon>
					</view>
					<text class="checkbox-label">明细</text>
				</view>
			</view>
		</view>
		
		<!-- 底部确定按钮 -->
		<view class="confirm-btn" @click="saveInvoice">
			<text class="confirm-btn-text">确定</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 小程序适配相关
			statusBarHeight: 0,
			navBarHeight: 44,
			menuButtonInfo: {
				width: 0,
				height: 0,
				top: 0,
				right: 0,
				bottom: 0,
				left: 0
			},
			windowWidth: 375,
			// 表单数据
			formData: {
				invoiceType: 'company', // personal: 个人, company: 团体
				personalName: '',
				companyName: '',
				taxNumber: '',
				invoiceContent: true // 是否选中明细
			}
		}
	},
	
	computed: {
		navbarStyle() {
			return {
				paddingTop: this.statusBarHeight + 'px'
			}
		},
		navbarContentStyle() {
			const paddingRight = (this.menuButtonInfo.width || 0) + (this.menuButtonInfo.right || 0) - this.windowWidth + 10
			return {
				height: this.navBarHeight + 'px',
				paddingRight: paddingRight + 'px'
			}
		}
	},
	
	onLoad(options) {
		this.initMiniProgramAdapt()
		this.loadInvoiceInfo()
	},
	
	onShow() {
		// 每次显示页面时重新加载发票信息
		this.loadInvoiceInfo()
	},
	
	methods: {
		// 小程序适配初始化
		initMiniProgramAdapt() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0
			this.windowWidth = systemInfo.windowWidth || 375

			// 获取胶囊按钮信息（仅小程序）
			// #ifdef MP
			try {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() || {
					width: 87,
					height: 32,
					top: this.statusBarHeight + 6,
					right: 7,
					bottom: this.statusBarHeight + 38,
					left: this.windowWidth - 94
				}
				this.navBarHeight = this.menuButtonInfo.height + (this.menuButtonInfo.top - this.statusBarHeight) * 2
			} catch (e) {
				console.error('获取胶囊按钮信息失败:', e)
				this.menuButtonInfo = {
					width: 87,
					height: 32,
					top: this.statusBarHeight + 6,
					right: 7,
					bottom: this.statusBarHeight + 38,
					left: this.windowWidth - 94
				}
				this.navBarHeight = 44
			}
			// #endif

			// #ifndef MP
			this.menuButtonInfo = {
				width: 0,
				height: 0,
				top: 0,
				right: 0,
				bottom: 0,
				left: 0
			}
			// #endif
		},
		
		// 加载发票信息
		loadInvoiceInfo() {
			const invoiceInfo = uni.getStorageSync('invoiceInfo')
			if (invoiceInfo) {
				this.formData = {
					...this.formData,
					...invoiceInfo
				}
			}
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 显示发票须知
		showInvoiceRule() {
			uni.showModal({
				title: '发票须知',
				content: '1、为了保障消费者的合法权益，部分入住厂家将为您开具由税务局监制印制的正规机打销售发票。\n\n\n2、发票是有效交易的重要凭据，纸质发票可作为单位报销的凭证，请妥善保管。\n\n\n3、发票金额为您购买商品实际的付款金额，配送费不在发票金额中体现。\n\n\n4、发票内容默认为"购买商品明细"，同时不支持修改发票内容，给您带来不便请您谅解。',
				showCancel: false,
				confirmText: '我知道了',
				confirmColor: '#FF6B35'
			})
		},
		
		// 选择发票类型
		selectInvoiceType(type) {
			this.formData.invoiceType = type
			if (type === 'personal') {
				this.formData.companyName = ''
				this.formData.taxNumber = ''
			} else {
				this.formData.personalName = ''
			}
		},
		
		// 切换发票内容
		toggleInvoiceContent() {
			this.formData.invoiceContent = !this.formData.invoiceContent
		},
		
		// 验证表单
		validateForm() {
			if (this.formData.invoiceType === 'personal') {
				if (!this.formData.personalName.trim()) {
					uni.showToast({
						title: '请填写个人名称',
						icon: 'none'
					})
					return false
				}
			} else if (this.formData.invoiceType === 'company') {
				if (!this.formData.companyName.trim()) {
					uni.showToast({
						title: '请填写单位名称',
						icon: 'none'
					})
					return false
				}
				
				if (!this.formData.taxNumber.trim()) {
					uni.showToast({
						title: '请填写纳税人识别号',
						icon: 'none'
					})
					return false
				}
			}
			
			return true
		},
		
		// 保存发票信息
		saveInvoice() {
			if (!this.validateForm()) {
				return
			}
			
			// 获取发票抬头名称
			let invoiceTitle = ''
			if (this.formData.invoiceType === 'personal') {
				invoiceTitle = this.formData.personalName
			} else {
				invoiceTitle = this.formData.companyName
			}
			
			// 保存新格式的发票信息
			const invoiceData = {
				...this.formData,
				invoiceTitle: invoiceTitle
			}
			uni.setStorageSync('invoiceInfo', invoiceData)
			
			// 同时保存旧格式的发票信息以保持兼容性
			const taxpaperData = {
				name: invoiceTitle,
				taxNum: this.formData.taxNumber || '',
				type: this.formData.invoiceType === 'personal' ? '1' : '2'
			}
			uni.setStorageSync('taxpapper', taxpaperData)
			
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
			
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
/* 容器样式 */
.invoice-container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 120rpx;
	box-sizing: border-box;
}

/* 导航栏样式 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: linear-gradient(135deg, #FF8033 0%, #FF6B35 100%);
}

.custom-navbar .navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	position: relative;
}

.custom-navbar .back-btn {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 10;
}

.custom-navbar .navbar-title {
	position: absolute;
	left: 0;
	right: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.custom-navbar .navbar-title .title-text {
	font-size: 40rpx;
	font-weight: 600;
	color: #fff;
	letter-spacing: 1rpx;
}

.custom-navbar .right-btn {
	width: auto;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 10;
	padding: 0 10rpx;
	margin-left: 15rpx;
}

.custom-navbar .right-text {
	font-size: 28rpx;
	color: #fff;
}

/* 表单容器 */
.wrapper {
	padding: 30rpx 20rpx 20rpx;
	margin-top: 150rpx;
}

.form-container {
	background-color: #fff;
	border-radius: 16rpx;
	overflow: hidden;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
	position: relative;
}

.form-item:last-child {
	border-bottom: none;
}

.label {
	font-size: 28rpx;
	color: #333;
	width: 200rpx;
	flex-shrink: 0;
}

.label.required::before {
	content: '*';
	color: #ff0000;
	margin-right: 4rpx;
}

.input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	padding: 8rpx 0;
	border: none;
	outline: none;
	text-align: right;
}

.input::placeholder {
	color: #B6B6B6;
}

/* 发票类型按钮 */
.invoice-type-btn {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.type-text {
	padding: 10rpx 30rpx;
	border: 2rpx solid #FF6B35;
	border-radius: 8rpx;
	color: #FF6B35;
	font-size: 26rpx;
}

/* 提示信息 */
.tip-box {
	background-color: #FFF5F0;
	padding: 20rpx 30rpx;
	margin: 20rpx 0;
}

.tip-text {
	font-size: 24rpx;
	color: #FF6B35;
	line-height: 1.6;
}

/* 分区标题 */
.section-title {
	font-size: 28rpx;
	color: #666;
	padding: 30rpx 40rpx 20rpx;
	background-color: #fff;
}

/* 单选框组 */
.radio-group {
	display: flex;
	align-items: center;
	padding: 30rpx 40rpx;
}

.radio-item {
	display: flex;
	align-items: center;
	margin-right: 80rpx;
}

.radio {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #ddd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12rpx;
}

.radio.checked {
	border-color: #FF6B35;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	background-color: #FF6B35;
	border-radius: 50%;
}

.radio-label {
	font-size: 28rpx;
	color: #333;
}

/* 复选框 */
.checkbox-item {
	display: flex;
	align-items: center;
}

.checkbox {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #ddd;
	border-radius: 4rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12rpx;
}

.checkbox.checked {
	background-color: #FF6B35;
	border-color: #FF6B35;
}

.checkbox-label {
	font-size: 28rpx;
	color: #333;
}

/* 底部确定按钮 */
.confirm-btn {
	position: fixed;
	bottom: 40rpx;
	left: 30rpx;
	right: 30rpx;
	height: 88rpx;
	background: linear-gradient(135deg, #FFB800 0%, #FFA000 100%);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	z-index: 999;
}

.confirm-btn-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
}
</style>
